<template>
  <div class="newbody">
    <div class="size16 sizefw title">{{ t('nameauthentication') }}</div>
    <div class="FormWarp">
      <div class="dfsp card" v-loading="imageloading">
        <div class="item">
          <el-upload class="upload" drag :http-request="IDcardF" :show-file-list="false">
            <div v-if="ruleForm.IDcardF == ''" class="uploadTip">
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                {{ t('frontID') }}
              </div>
            </div>
            <img v-else :src="ruleForm.IDcardF" alt="" />
          </el-upload>
        </div>
        <div class="item">
          <el-upload class="upload" drag :http-request="IDcardB" :show-file-list="false">
            <div v-if="ruleForm.IDcardB == ''" class="uploadTip">
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                {{ t('reverseID') }}
              </div>
            </div>
            <img v-else :src="ruleForm.IDcardB" alt="" />
          </el-upload>
        </div>
      </div>
      <el-form ref="refruleForm" :model="ruleForm" :rules="rules" class="refruleForm">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" size="large" :placeholder="t('pleaseentername')" />
        </el-form-item>
        <el-form-item prop="IDcard">
          <el-input v-model="ruleForm.IDcard" size="large" :placeholder="t('pleaseenterID')" />
        </el-form-item>
        <el-form-item prop="bank_name">
          <el-input
            v-model="ruleForm.bank_name"
            size="large"
            :placeholder="t('pleaseenterbankaccount')"
          />
        </el-form-item>
        <el-form-item prop="deposit_branch">
          <el-input
            v-model="ruleForm.deposit_branch"
            size="large"
            :placeholder="t('pleaseentername')"
          />
        </el-form-item>
        <el-form-item prop="bank_account">
          <el-input
            v-model="ruleForm.bank_account"
            size="large"
            :placeholder="t('pleaseenterbankaccount')"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-button
      v-loading="loading"
      :disabled="loading"
      class="btn btnbg"
      @click="submitForm(refruleForm)"
      size="large"
      >{{ t('confirm') }}</el-button
    >
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { pathToBase64 } from '@/common/Base64.js'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref, getCurrentInstance } from 'vue'
const ruleForm = reactive({
  name: '',
  IDcard: '',
  IDcardF: '',
  IDcardB: '',
  deposit_branch: '',
  bank_account: '',
  bank_name: '',
})
const refruleForm = ref() //表单验证
const rules = reactive({
  name: [
    {
      required: true,
      message: t('pleaseentername'),
      trigger: 'blur',
    },
  ],
  IDcard: [
    {
      required: true,
      message: t('pleaseenterID'),
      trigger: 'blur',
    },
  ],
  deposit_branch: [
    {
      required: true,
      message: t('pleaseenteropeningbranch'),
      trigger: 'blur',
    },
  ],
  bank_account: [
    {
      required: true,
      message: t('pleaseenterbankaccount'),
      trigger: 'blur',
    },
  ],
  bank_name: [
    {
      required: true,
      message: t('pleaseenterbankdeposit'),
      trigger: 'blur',
    },
  ],
})
const { proxy } = getCurrentInstance()
const imageUrl = ref('')

// 上传正面
const IDcardF = (data) => {
  pathToBase64(URL.createObjectURL(data.file)).then((res) => {
    imageUrl.value = res
    base64upload('IDcardF')
  })
}
// 上传反面
const IDcardB = (data) => {
  pathToBase64(URL.createObjectURL(data.file)).then((res) => {
    imageUrl.value = res
    base64upload('IDcardB')
  })
}
// 提交图片
const imageloading = ref(false)
const base64upload = (type) => {
  imageloading.value = true
  proxy
    .$post('/mt4/Member/base64upload', {
      file: imageUrl.value,
    })
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      if (type == 'IDcardF') {
        ruleForm.IDcardF = res.data
      } else {
        ruleForm.IDcardB = res.data
      }
      imageloading.value = false
    })
    .catch((res) => {
      imageloading.value = false
    })
}

// 点击确认
const loading = ref(false)
const submitForm = async (formEl) => {
  if (ruleForm.IDcardF == '') {
    ElMessage.error(t('pleaseuploadfrontID'))
    return
  }
  if (ruleForm.IDcardB == '') {
    ElMessage.error(t('pleaseuploadreverseID'))
    return
  }
  loading.value = true
  await formEl.validate((valid, fields) => {
    if (valid) {
      proxy
        .$post('/mt4/Member/auth', ruleForm)
        .then((res) => {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          loading.value = false
          formEl.resetFields()
        })
        .catch((res) => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}
</script>

<style scoped lang="less">
.card {
  height: 180px;
  margin-bottom: 20px;

  .item {
    width: 48%;
    height: 100%;

    .upload {
      width: 100%;
      height: 100%;

      .uploadTip {
        padding: 30px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.FormWarp::-webkit-scrollbar {
  width: 0;
}

.FormWarp::-webkit-scrollbar-thumb {
  width: 0;
}

.FormWarp {
  // width: 500px;
  height: calc(100% - 110px);
  margin: 30px 0;
  box-sizing: border-box;
  overflow-y: scroll;
}

.refruleForm {
  width: 500px;
}

.newbody {
  width: 100%;
  height: 100%;
  background-color: transparent;
  padding: 40px;
  box-sizing: border-box;

  .title {
    color: #bb8d62;
    font-size: 24px;
    text-align: center;
  }
}
/deep/ .el-upload-dragger {
  height: 100%;
}
/deep/ .el-upload.is-drag {
  height: 100%;
}

/deep/ .el-upload-dragger {
  padding: 0;
}

/*  ::v-deep */
/deep/ .el-select .el-input__inner {
  width: 100px;
  text-align: center;
}

/deep/ .el-select .el-input__wrapper {
  box-shadow: none !important;
  background-color: transparent !important;
  text-align: center;
}

/deep/.el-input .el-input__wrapper.is-focus {
  box-shadow: none !important;
}

/deep/ .el-select .el-input.is-focus .el-input__wrapper {
  border-color: #dcdfe6 !important;
  box-shadow: none !important;
}

.btn {
  width: 500px;
  border-radius: 25px;
  border: 1px solid #bb8d62;
  background-color: #dcd5cf !important;
  color: #242424 !important;
}

::v-deep {
  .el-input__wrapper {
    background: #212121;
    border: 1px solid #434343;
    border-radius: 4px;
    box-shadow: none !important;

    &:hover {
      box-shadow: none !important;
    }

    .el-input__inner {
      color: #dcd5cf;
    }
  }

  .el-upload-dragger {
    background: #212121;
    border: 1px solid #434343;
    border-radius: 4px;

    .el-icon--upload {
      color: #dcd5cf;
    }

    .el-upload__text {
      color: #dcd5cf;
    }
  }

  .el-input {
    border: 1px solid #434343;
    border-radius: 25px;
  }
}
</style>
